<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的微币</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/mui.min.css" />
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/weibi.css" />
    <link rel="stylesheet" type="text/css" href="css/header.css"/>
    <script src="js/jquery.min.js"></script>
</head>
<body id="weibi" class="bg1">
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">我的积分</h1>
	</header>
<section>
    <div class="userInfo Center">
        <div class="userInfo-container ver-center b1">
            <div class="user-pic"><img src="img/bi2.png"alt=""></div>
            <p>我的积分:<span class="weibiNum">50个</span></p>
            <a href="jfmx.html" class="weibi-detail">查看积分明细</a>
        </div>
    </div>
    <div class="cont-wrap bgWhite">
        <div class="cont-head">
            <a class="cont-title ver-center">
                <p>购买积分</p>
            </a>
        </div>
        <div class="cont-main">
            <ul class="weibiPrice ver-center">
                <li class="display-box" data-num="100" data-id="10">
                    <div class="weibi-type">
                        <p class="num">100积分</p>
                        <p class="price" id="one">￥80</p>
                    </div>
                    <div class="selected">
                        <i></i>
                        <span><img src="img/selected.png" width="100%" alt=""></span>
                    </div>
                </li>
                <li class="display-box" data-num="1000" data-id="98">
                    <div class="weibi-type">
                        <p class="num">500积分</p>
                        <p class="price" id="two">￥350</p>
                    </div>
                    <div class="selected">
                        <i></i>
                        <span><img src="img/selected.png" width="100%" alt=""></span>
                    </div>
                </li>
                <li class="display-box" data-num="8000" data-id="198">
                    <div class="weibi-type">
                        <p class="num">1000积分</p>
                        <p class="price" id="three">￥700</p>
                    </div>
                    <div class="selected">
                        <i></i>
                        <span><img src="img/selected.png" width="100%" alt=""></span>
                    </div>
                </li>
            </ul>
            <div class="notice">
                <span>说明</span>：积分作为百千信虚拟货币，用于应用内购买付费材料
                或服务。充值问题可咨询微信公众号：
            </div>
        </div>
    </div>
    <div class="cont-wrap bgWhite">
        <div class="cont-head">
            <a class="cont-title ver-center">
                <p>选择支付方式</p>
            </a>
        </div>
        <div class="cont-main2">
            <ul class="payStyle cont-li">
                <li class="ver-center">
                    <div class="ico Center pic"><i class="iconfont icon-zhifubaozhifu"></i></div>
                    <div class="title flex-1"><h1>支付宝支付</h1></div>
                    <div class="select" data-id="alipay"><div class="gouxuan"><i class="iconfont icon-xuanze1"></i></div></div>
                </li>
                <li class="bbn ver-center">
                    <div class="ico Center pic1"><i class="iconfont icon-weixinzhifu" ></i></div>
                  <div class="title flex-1"><h1>微信支付</h1></div>
                    <div class="select" data-id="wxpay"><div class="gouxuan"><i class="iconfont icon-xuanze1"></i></div></div>
                </li>
            </ul>
        </div>
    </div>
</section>
<footer class="confirm display-box">
    <div class="leftCont flex-1 ver-center">
        <div>
            <div class="buy-des">您选择了购买<span>0积分</span></div>
            <div class="totalPrice">总计：<sapn class="priceNum">0元</sapn></div>
        </div>
    </div>
    <div class="rightCont" >
        <button id="pay">确认支付</button>
    </div>
</footer>
<script src="js/mui.min.js"></script>
<script src="js/html/common.js"></script>
<!--<script src="js/html/weibi.js"></script>-->
	  <script type="text/javascript" src="js/fastclick.js"></script>
<script>
  $(function() {
		FastClick.attach(document.body);
  });
</script>
<script>
    $('.payStyle li .select').click(function(){
        $(this).addClass('selected').parents().siblings('li').children('.select').removeClass('selected')
    })
    var $buyDes=$('footer .buy-des span');
    var $Price=$('footer .totalPrice .priceNum');
    $('.cont-main>ul li').click(function(){
        $(this).addClass('hover').siblings().removeClass('hover');
        var num=$(this).children('div').find('.num').html();
        var price=$(this).children('div').find('.price').html().split('￥')[1]+"元";
        $buyDes.html(num)
        $Price.html(price)
    })
</script>
</body>
</html>
